import React, { Component } from "react";
import Header from "../../components/Header/Header";
import { reqgetbanner, reqgetcate, reqgetindexgoods,reqgetnew,reqgetgroupon } from "../../http/api";
import Banner from "./components/Banner/Banner";
import Cate from "./components/Cate/Cate";
import Goods from "./components/Goods/Goods";
import New from "./components/New/New";
import Groupon from "./components/Groupon/Groupon";

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      cate: [],
      news:[],
      groupon:[],
      banner: [],
      goods:[],
      n:0
    };
  }
  componentDidMount() {
    this.getnew();
    this.getcate();
    this.getbanner();
    this.getGoods();
    this.getgroupon();
  }
  //新人专享
  async getnew(){
    let res = await reqgetnew();
    if(res.data.code === 200){
      this.setState({
        news:res.data.list,
      });
    }
  }
  //万人团
  async getgroupon(){
    let res = await reqgetgroupon();
    if(res.data.code === 200){
      this.setState({
        groupon:res.data.list,
      })
    }
  }
  //请求分类
  async getcate() {
    let res = await reqgetcate();
    if (res.data.code === 200) {
      this.setState({
        cate: res.data.list,
      });
    }
  }
  //请求轮播
  async getbanner() {
    let res = await reqgetbanner();
    if (res.data.code === 200) {
      this.setState({
        banner: res.data.list,
      });
    }
  }
  //商品
  async getGoods() {
    let res = await reqgetindexgoods();
    if (res.data.code === 200) {
      this.setState({
        goods: res.data.list,
      });
    }
  }
  render() {
    let { cate,news,groupon,banner,goods,n } = this.state;
    return (
      <div>
        <Header title="首页"></Header>

        {/* 分类 */}
        <Cate cate={cate}></Cate>
        {/* 新人专享 */}
        <New news={news}></New>
        {/* 轮播图 */}
        <Banner banner={banner}></Banner>
        {/* 万人团 */}
        <Groupon groupon={groupon}></Groupon>
        {/* 商品 */}
        <Goods goods={goods} n={n} onChangeN={n=>{
          this.setState({
            n
          })
        }}></Goods>
      </div>
    );
  }
}
